<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>我的打卡</title>
  <link rel="stylesheet" href="./style/common.css">
  <link rel="stylesheet" href="./style/home.css" />
</head>

<body>
  <div id="app">
    <header class="flex aic pl-15 jc-sb pr-15">
      <input type="text" placeholder="请输入成员名称" v-model="name">
      <span class="base" @click="add">添加</span>
    </header>



    <main>
      <ul class="list">
        <li class="item flex jc-sb aic pl-15 pr-15" v-for="(item,index) in list">
          <a :href="`./daka.html?memberId=${item.memberId}`">{{item.name}}</a>
          <img @click="del(item.id,index)" style="height: 20px;" src="./img/del.png" alt="">
        </li>

      </ul>
    </main>

    <footer class="flex jc-sa aic">
      <a href="./home.html" class="cursor">成员</a>
      <a href="./daka.html" class="cursor">章节</a>
      <a href="./count.html" class="cursor">统计</a>
    </footer>
  </div>



  <script src="./js/axios.js"></script>
  <script src="./js/vue.js"></script>
  <script src="./js/hammer.js"></script>
  <script src="./js/common.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
        list: []
      },

      created() {
        this.getList();
      },

      methods: {
        getList() {
          common.get('/member/list').then(res => {
            this.list = res.data.data;
            this.name = '';
          })
        },

        del(id, index) {
          var boo = confirm('確定刪除去');
          if (boo) {
            common.post('/member/del', {
              id,
            }).then(res => {
              this.list.splice(index, 1);
            })
          }

        },

        add() {
          if (!this.name) return false;
          common.post('/member/add', {
            name: this.name
          }).then(res => {
            this.list.push(res.data.data);
          })
        },
      }
    })
  </script>
</body>

</html>